<template>
	<div class="login-container">
		<!-- <div class="login-intro">
			<h1>{{ $t('app.title') }}</h1>
			<div class="desc">
				{{ $t('app.description') }}
			</div>
			<div class="login-bg"><img src="@/assets/login.png" alt="" /></div>
		</div> -->
					<!-- <el-button link :class="loginType === 'account' ? 'account' : ''" @click="loginSwitch('account')">{{ $t('app.signIn') }}</el-button> -->
		<!-- <div class="login-form">
			<div class="login-title">
	
				<el-button link :class="loginType === 'account' ? 'account' : ''" @click="loginSwitch('account')">欢迎使用本公司系统</el-button>
			</div>
			<account v-if="loginType === 'account'" />
		</div> -->

		<!-- 改 -->
		<div class="centerInfo">
			<div class="leftInfo"> 
                 <div class="fontStyle">欢迎使用本公司系统</div>
				 <div class="copyRight">welcome back 版本号:2.26</div>
				 <div>
					<account v-if="loginType === 'account'" />
				 </div>
				 
			</div>
			<div class="rightInfo">
				
			</div>

		</div>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Account from './account.vue'

// 登录类型
const loginType = ref('account')
const loginSwitch = (type: string) => {
	loginType.value = type
}
</script>

<style lang="scss" scoped>
.login-container {
	// background-color: #666;
	background-image: url("../../assets/http_/http_/login_bg.png");
	background-size: cover;    /* 根据需求调整尺寸 */
  background-position: center;
  background-repeat: no-repeat;
	// display: flex;
	// justify-content: center;
	// align-items: center;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.centerInfo{
	background-image: url("../../assets/http_/http_/center.png");
	background-size: cover;    /* 根据需求调整尺寸 */
  background-position: center;
  background-repeat: no-repeat;
	// border:1px solid red;
	width:120vh;
	height:70vh;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	border-radius: 20px;
}
.leftInfo{
	// border:1px solid green;
	width:400px;
	height:500px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.rightInfo{
	// border:1px solid green;
	width:400px;
	height:500px;
	background-image: url("../../assets/http_/http_/right_pic.png");
	background-size: cover;    /* 根据需求调整尺寸 */
    background-position: center;
    background-repeat: no-repeat;
}
.fontStyle{
	 font-weight: bold;
	 font-size: 26px;
	 color: white;
	 margin-bottom: 50px;
}
.copyRight{
	font-weight: bold;
	 font-size: 12px;
	 color: white;
	 margin-top: -40px;
}



// .login-intro {
// 	display: flex;
// 	flex-direction: column;
// 	width: 520px;
// 	flex: 0 1 auto;
// }
// .login-intro h1 {
// 	color: var(--el-color-primary);
// }
// .login-intro .desc {
// 	color: rgb(113, 115, 112);
// 	line-height: 32px;
// 	padding: 15px 0;
// }
// .login-bg img {
// 	width: 520px;
// }
// .login-title {
// 	display: flex;
// 	justify-content: space-around;
// 	margin-bottom: 20px;
// 	:deep(.el-button) {
// 		font-size: 20px;
// 		color: #333;
// 		padding-bottom: 8px;
// 	}
// 	.account {
// 		color: rgb(255, 255, 255);
// 		// color: var(--el-color-primary);
// 		// border-bottom: 4px solid var(--el-color-primary) !important;
// 	}
// }
// .login-form {
// 	// background-color: #fff;
// 	// flex: 0 1 auto;
// 	padding: 40px;
// 	border-radius: 6px;
// 	// box-shadow: 1px 1px 8px #aaa6a6;
// 	box-sizing: border-box;
// 	width: 440px;

// 	:deep(.el-input) {
// 		height: 45px;
// 		margin-top: 5px;
// 		.el-input__inner {
// 			padding: 10px 15px 10px 5px;
// 			height: 45px;
// 			line-height: 45px;
// 			color: #666;
// 			font-size: 16px;
// 		}
// 	}
// }

// @media only screen and (max-width: 992px) {
// 	.login-intro {
// 		display: none;
// 	}
// }
// @media only screen and (max-width: 768px) {
// 	.login-container {
// 		background: #fff;
// 	}
// 	.login-intro {
// 		display: none;
// 	}
// 	.login-form {
// 		flex: 0 1 auto;
// 		border-radius: 0;
// 		box-shadow: none;
// 	}
// 	.login-captcha {
// 		:deep(.el-input) {
// 			width: 150px;
// 		}
// 	}
// }


</style>
